<template>
	<div id="app">
		<!-- form -->
		<div class="box">
			<h2 style="text-align: center; color: #409EFF;">风控管理--信息采集</h2>
			<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">

				<el-form-item label="姓名" prop="name">
					<el-input v-model="ruleForm.name" maxlength="4" placeholder="请输入您的姓名" clearable></el-input>
				</el-form-item>

				<el-form-item label="身份证" prop="IDs">
					<el-input v-model="ruleForm.IDs" placeholder="请输入您的身份证号">
					</el-input>
				</el-form-item>

				<el-form-item label="住址" prop="Site">
					<el-input type="textarea" v-model="ruleForm.Site" placeholder="请输入您的住址">
					</el-input>
				</el-form-item>

				<el-form-item label="在职时间" prop="date1">
					<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
				</el-form-item>

				<el-form-item label="手机号">
					<el-row>
						<el-col :span="12">
							<el-form-item prop="Phone">
								<el-input v-model="ruleForm.Phone" clearable placeholder="请输入您手机号">
								</el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col class="line" :span="1">-</el-col> -->
						<el-col :span="11" :offset="1">
							<el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码
							</el-button>
							<el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
							</el-button>
						</el-col>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-col :span="8">
							<el-form-item prop="sendcode">
								<el-input v-model="ruleForm.sendcode" v-if="BoxShow==true" placeholder="请输入验证码"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form-item>

				<!-- 用户协议，保密协议 -->
				<el-form-item prop="Protocol">
					<el-checkbox v-model="ruleForm.Protocol" name="type">同意所有协议
					</el-checkbox>
					<el-button type="text" @click="centerDialogVisible = true">《保密协议》</el-button>

					<el-dialog title="保密声明" :visible.sync="centerDialogVisible" width="35%" center>
						<pre style="margin-left: 50px;">
根据《中华人民共和国反不正当竞争法》法律、法规规定，鉴于本人受聘于离职，
本人在职期间有从离职获得离职经营策略秘密和客户资料秘密的机会，有获得及
增进知识、经验、技能的机会；离职给本人的劳动支付了工资、奖金、提成、奖
励等报酬；本人明白泄露离职经营策略秘密、客户资料秘密会对离职造成极大损
害。为保护离职的经营策略秘密、客户资料秘密，维护离职及本人共同的长远利
益，本人自愿声明如下：
<p style="color:red;"><strong>离职作为与阿里巴巴合作的渠道商，以下保密内容及义务，统统包括与阿里巴巴
相关的需要保密的策略、信息、方案、数据等机密。</strong></p>
<b>一、保密内容</b>
1.离职尚未公开的发展规划、方针政策、经营决策的信息、计划、方案；
2.离职的经营方法、状况和经营实力；
3.离职机构的设置、编制、人员名册和统计表、奖惩材料、考核材料；
4.离职各级员工的个人薪金收入情况；
5.离职具有保密级别的文件、资料、会议记录、信件、方案、图片；
6.离职客户的资料及财产；

<b>二、保密义务</b>
1.本人必须严格遵守离职规定的任何成文或者不成文的保密文件、规章、制度等，
不得以任何形式将离职的任何机密泄露给离职以外的任何其他人。知悉离职机密
泄露情况者，应及时向离职人事部负责人报告，并采取有效措施防止泄密进一步扩大。
2.本人不得在私人交往或通信中泄露离职机密，不得在公共场合谈论离职机密，
不得通过其他方式向第三方传递离职机密信息。
3.本人在职期间不得通过任何形式，泄露阿里巴巴相关数据、信息等机密。
4.本人不得与离职人事部门以外的第三方讨论、传播、散布、比对薪资。
5.无论本人以何种形式离职或被离职辞退，双方解除或终止劳动合同后，本人
仍然不得向其在离职任职期间接触、知悉的属于离职就职人员及其有关亲朋好
友披露自己曾在离职就职的离职经营策略、机密文件内容及工作待遇情况。
6.本人必须严格遵守离职的保密制度，防止泄露离职的商业秘密。
7.本人承诺在离职任职期间，不从事第二职业。特别是未经离职书面同意，
不得在与离职经营同类产品或提供同类服务的其他企业内任职，包括但不
限于合伙人、董事、监事、股东、经理、职员、代理人、顾问等；不得间
接为上述企业提供服务。

<b>三、违约责任</b>
1.本人若违反协议，造成离职重大经济损失，应赔偿离职所受全部损失，
违约罚款不足以赔偿离职所受的损失，本人当以离职实际损失额进行赔偿，
包括但不限于，实际可计算的损失、潜在的损失；
2.在劳动合同期限内，本人违反本协议约定或有关法律规定，离职按本人
自动离职处理，或者视情况给予降薪、降职甚至作出开除的处分决定；
3.以上违约责任的执行，超过法律、法规赋予双方权限的，申请仲裁机构
仲裁或向法院提出告诉；双方协商不成，任何一方有权申请仲裁机构仲裁
或向法院提出告诉。

<b>四、本人自愿声明</b> 
本保密条款完全出于本人的真实意图表达，并声明自愿遵守，履行保密义务。
</pre>
						<span slot="footer" class="dialog-footer">
							<el-button @click="checkDialog(centerDialogRule1 = false)">不同意</el-button>
							<el-button type="primary" @click="checkDialog(centerDialogRule1 = true)">我同意</el-button>
						</span>
					</el-dialog>

					<!-- 协议二：安全协议 -->
					<el-button type="text" @click="centerDialogVisible2 = true">《安全公约》</el-button>

					<el-dialog title="安全公约" :visible.sync="centerDialogVisible2" width="35%" center>
						<pre style="margin-left: 50px;">
<b>一、目的</b>
安全防控是目前集团和各位员工向前发展的重要核心，固为加强集团和各位员工
的安全与防控意识，为能更好的完善离职的经营与管理体系，根据国离职有关法律、
法规及离职章程的规定，特制订本集团《安全公约》。

<b>二、公约细则
自觉遵守渠道制度、离职制度、保密协议和安全内控制度，强化自律、自控，维
护离职利益，做到不犯法，不违规，不触碰风控高压线。</b>
1.严格履行保密义务，严格执行保密义务，做到不透露CRM系统账号、不泄露
离职商业数据，不倒卖离职资源，不传播离职负面。
2.严格遵守离职管理制度，做到签单不跨区，录入不撞单，拒绝黑名单客户，
单子不买卖。
3.诚实到单，销售在获得业绩时，不得虚假业绩，不得弄虚假客户信息，不得用
不正当手段获取其他虚假业绩。
4.诚实报单，经理总监在上报业绩时，不得谎报业绩，不得恶意获取离职激励。
5.文明使用工作系统，不利用任何软件、程序对CRM系统进行操作。
6.摆正心态，不受利益影响，做到杜绝任何形式的回扣。
7.具备专业的服务态度，耐心对待客户，定要做到不辱骂，不嘲笑，尊重客户。

<b>三、认真学习和掌握各种安全操作及有关品控方面的知识，积极参加各种品控
培训，努力提高安全意识，自觉遵守安全作业的各项制度。

四、如违反上述公约，我自愿接受离职制度规定的处罚。</b>
						</pre>

						<span slot="footer" class="dialog-footer">
							<el-button @click="checkDialog(centerDialogRule2 = false)">不同意</el-button>
							<el-button type="primary" @click="checkDialog(centerDialogRule2 = true)">我同意</el-button>
						</span>
					</el-dialog>
				</el-form-item>

				<el-form-item style="margin-left: 40px;">
					<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			let validatorName = (rule, value, callback) => {
				let _rule = /^[\u4e00-\u9fa5]{2,4}$/ // 2~4 个中文字
				if (!_rule.test(value)) {
					callback(new Error('请输入正确的姓名'))
				} else {
					callback()
				}
			};
			let validatorIDs = (rule, value, callback) => {
				// 身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X
				let _rule = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				if (!_rule.test(value)) {
					callback(new Error('请输入正确的身份证号'))
				} else {
					callback()
				}
			};
			let validatorPhone = (rule, value, callback) => {
				// 手机号判断、短信验证、身份证验证
				let _rule = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
				if (!_rule.test(value)) {
					callback(new Error('请输入正确的手机号'))
				} else {
					callback()
				}
			};


			return {
				ruleForm: {
					name: '',
					IDs: '',
					Site: '',
					date1: '',
					Phone: '',
					sendcode: '', // 输入框验证码
					Protocol: false, // 协议

				},
				rules: {
					name: [{
							required: true, // 是否必须
							message: '请填写姓名', // 提示信息
							trigger: 'blur' // 触发
						},
						{
							validator: validatorName,
							trigger: 'blur'
						}
					],
					IDs: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}, {
						validator: validatorIDs,
						trigger: 'blur'
					}],
					Site: [{
						required: true,
						message: '请输入地址',
						trigger: 'change'
					}],
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					Phone: [{
						required: true,
						message: '请输入号码',
						trigger: 'change'
					}, {
						validator: validatorPhone,
						trigger: 'blur'
					}]
				},
				disabled: false,
				time: 0,
				btntxt: "重新发送",
				BoxShow: true, // 验证码框显示、隐藏
				centerDialogVisible: false, // 对话框显隐
				centerDialogVisible2: false, // 对话框2
				centerDialogRule1: false, // 存储协议1状态
				centerDialogRule2: false, // 存储协议2状态
			};
		},
		methods: {
			//手机验证发送验证码,并进行验证
			sendcode() {
				this.BoxShow = true;
				const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
				if (this.ruleForm.Phone == '') {
					this.$message({
						message: '手机号不能为空',
						center: true
					})
					return
				}
				if (!reg.test(this.ruleForm.Phone)) {
					// element 弹出提示消息
					this.$message({
						message: '请输入正确的手机号',
						center: true
					})
					return
				} else {
					console.log(this.ruleForm.Phone);
					let SMS = this.axios.create({
						baseURL: 'http://albeibei.cn:8888/post/v1',
						setTimeout: 1500
					})
					let tel = this.ruleForm.Phone // 手机号
					let id_card = this.ruleForm.IDs // 身份证

					SMS({
						method: 'post',
						url: '/code/',
						data: {
							tel,
							id_card
						}
					}).then(() => {
						this.$message({
							message: '发送成功',
							type: 'success',
							center: true
						});
					}).catch(err => {
						let errs = err.response.data.error
						// callback(new Error(errs))
						this.$message({
							message: errs,
							type: 'success',
							center: true
						});
					})

					this.time = 60;
					this.disabled = true;
					this.timer();
				}
			},
			//60S倒计时
			timer() {
				if (this.time > 0) {
					this.time--;
					this.btntxt = this.time + "s后重新获取";
					setTimeout(this.timer, 1000);
				} else {
					this.time = 0;
					this.btntxt = "获取验证码";
					this.disabled = false;
				}
			},
			// 提交
			submitForm(formName) {
				// this.formartUTC()
				this.$refs[formName].validate((valid) => {
					if (valid && this.ruleForm.Protocol == true) {
						let name = this.ruleForm.name
						let id_card = this.ruleForm.IDs
						let tel = this.ruleForm.Phone
						let address = this.ruleForm.Site
						// 时间格式处理
						var GmtDate = this.ruleForm.date1
						let year = GmtDate.getFullYear(); 
						let month = GmtDate.getMonth()+1;// js 从0开始
						let Days = GmtDate.getDate();
						if (month < 10) {
							month = "0" + month;
						}
						if (Days < 10) {
							Days = "0" + Days;
						}
						let work_time = year + "-" + month + "-" + Days;
						let code = this.ruleForm.sendcode
						
						let formValue = this.axios.create({
							baseURL: 'http://albeibei.cn:8888/post/v1/',
							timeout: 1500,
						})
						formValue({
							method: 'post',
							url: 'register/',
							data: {
								name,
								id_card,
								tel,
								address,
								work_time,
								code
							}
						}).then(() => {
							this.$message({
								message: '提交成功',
								type: 'success',
								center: true
							})
						}).catch(() => {
							// console.log('error', err)
							this.$message({
								message: '提交失败',
								type: 'warning',
								center: true
							})
						})
					} else {
						this.$message({
							message: '提交失败',
							type: 'warning',
							center: true
						})
						return false;
					}
				});
			},
			// 重置
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			// 双层协议
			checkDialog() {
				this.centerDialogVisible = false;
				this.centerDialogVisible2 = false;
				// console.log(this.centerDialogRule1, this.centerDialogRule2, this.ruleForm.Protocol)
				if (this.ruleForm.Protocol == false) {
					if (this.centerDialogRule1 == true && this.centerDialogRule2 == true) {
						this.ruleForm.Protocol = true
					} else {
						if (this.centerDialogRule1 == false) {
							// console.log('请查看并同意《保密协议》')
						}
						if (this.centerDialogRule2 == false) {
							// console.log('请查看并同意《安全公约》')
						}
					}
				}

			}

		}
	}
</script>

<style>
	.box {
		width: 500px;
		margin: auto;
		margin-top: 10%;
		border: 1px solid #E4E7ED;
		padding: 50px 100px 100px 100px;
		background-color: #F2F6FC;
	}
</style>
